<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>20.4.PC端网页特效-.元素滚动scroll系列</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
            border: 10px solid red;
            padding: 10px;
            overflow: auto;
        }
    </style>
</head>

<body>
    <div>
        scroll
        scroll
        scroll
        scroll
        scroll
        scroll
        scroll
        scroll
        scroll
        scroll
        scroll
        scroll
        scroll
        scroll
        scroll
        scroll
        scroll
        scroll
        scroll
        scroll
        scroll
        scroll
        scroll
        scroll
        scroll
        scroll
        scroll
        scroll
        scroll
        scroll
        scroll
        scroll
        scroll
        scroll
        scroll
        scroll
        scroll
        scroll
        scroll
        scroll
        scroll
        scroll
        scroll
        scroll
        scroll
        scroll
        scroll
        scroll
    </div>
    <script>
        // scroll 系列
        var div = document.querySelector('div');
        console.log(div.scrollHeight);
        console.log(div.clientHeight);
        // scroll滚动事件 当滚动条发生变化会触发的事件
        div.addEventListener('scroll', function () {
            console.log(div.scrollTop);
        })
    </script>
</body>

</html>